<template>
    <div class="bd">
        <loading :isOpen="isOpen"></loading>
        <div class="video_banner">
            <img src="../assets/banner.jpg" v-if="!picture" class="one">
            <img :src="banner" v-if="picture" class="two">
        </div>

        <div id="video">
            <el-row class="video_bd" :gutter="24" style="margin-bottom:0">
                <el-col :span="6" class="left">
                    <div class="grid-content">
                        <ul>
                            <li v-show="no_sort">暂无分类</li>
                            <li v-bind:class="{'left_active':sort.id==cid_focus,'back_active':cid==sort.id,'left_active2':val==0 && $route.params.cid==null}" v-for="(sort,val) in left" :key="sort.side" @click="active($event,val,sort.id)" :id="sort.id">{{sort.title}}</li>
                        </ul>
                        <div class="ad" v-show="no_adver==false">
                            <a :href="adver_url">
                            <img :src="adver.img">
                            </a>
                        </div>
                        <p style="display:none" ref="cid">{{$route.params.cid}}</p>
                        <!-- <p>{{cid_focus}}</p> -->
                    </div>
                </el-col>
                <el-col :span="18">
                    <div id="video_box">
                        <div class="noData" v-if="page==0">暂无数据</div>
                        <!-- <div class="noData" v-if="no_sort">暂无数据</div> -->
                        <el-row :gutter="20">
                            <el-col :span="12" class="video_box" v-for="video_list in video" :key="video_list.videos">
                                <div class="grid-content list_cont">
                                    <div class="video_cover">
                                        <router-link :to="{name:'video_detail',params: {id:video_list.id,cid:cid_focus,cover:video_list.cover[0]}}">
                                            <img :src="video_list.cover">
                                            <div class="covers">
                                                <img src="../assets/video.png" class="icon_video">
                                            </div>
                                            <div class="desc">
                                                <p class="desc_title">{{video_list.title}}</p>
                                            </div>
                                        </router-link>
                                    </div>

                                </div>
                            </el-col>

                        </el-row>
                        <div id="page" v-if="videoData">
                            <el-pagination @current-change="pageIndexChange" :page-size="sum_.per_page" :current-page="current_page" layout="prev, pager, next" :total="sum_.total">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>

            </el-row>

        </div>
    </div>
</template>

<script>
var page=1;
import loading from './Loading'
export default {

    data() {
        return {
            left: [],
            cid_focus: 0,
            video: [],
            id:'',
            current_page:1,
            page: [],
            isOpen: true,
            videoData:true,
            banner:[],
            picture:true,
            no_sort:false,
            com_id:localStorage.getItem("companyid"),
            sum_:[],
            adver:[],
            no_adver:false,
            company_name:[],
            adver_url:[]
        }
    },
     components:{ loading},
    mounted() {
        var self=this;
        setTimeout(function(){
            var com_id=localStorage.getItem("companyid");
            self.com_id=com_id;
            self.loadLeftside();
            self.loadBanner();
            self.loadAdver();
        },300)  
    },
    methods: {
        loadAdver:function(){
            this.$http.get('http://thy.588net.com/index.php/api/company.adv/get_adv?' + 'company_id=' + this.com_id +'&position='+'video').then(function(res) {
              
                var len=res.body.data.adv;
               if(res.body.code==1002){
                this.no_adver=true;
               }

               if(res.body.code==200){
                  for(var i=0;i<len.length;i++){
                       if(len[i].position=="video_aside"){
                           this.adver=len[i];
                           var init_='http://'
                           var ad_url=this.adver.url;
                           if(ad_url==''){
                                 this.adver_url='javascript:'
                           }else{
                                 if(ad_url.indexOf("http://")>=0){
                                    //alert("格式正确")
                                    this.adver_url=ad_url;
                                }else{
                                    //alert("格式bu正确")
                                    this.adver_url=init_.concat(ad_url);
                                    //console.log(adver_url)
                                }
                           }
                       }                      
                   }
                   //alert(this.adver);
                    if(this.adver==''){
                        this.no_adver=true;
                    }else{
                         this.no_adver=false;
                    }
                  
               }
               
            })
        },
        loadBanner() {
            this.$http.get('http://thy.588net.com/index.php/api/Company/get_company_index?' + 'company_id=' + this.com_id).then(function(res) {
                this.banner = res.body.data.company.video_banner;
                this.company_name=res.body.data.company.name;
                document.title='视频列表-'+this.company_name;

                if(this.banner==''){
                   this.picture=false;
                   
                }else{
                   this.picture=true;
                  
                }
                console.log(this.banner)
            })
        },
        loadLeftside() {
            this.$http.get('http://thy.588net.com/index.php/article/article/get_video_cate?'+ 'company_id=' + this.com_id).then(function(res) {
                
                if(res.body.data==''||res.body.data==null){
                    //alert('kongle')
                    this.loadvideoList(this.id);
                    this.no_sort=true;
                }else{
                    this.no_sort=false;
                    this.left = res.body.data;
                    this.id=res.body.data[0].id;
                    this.loadvideoList(this.id);
                    this.cid_focus = this.$route.params.cid;               
                }
            })
        },
        loadvideoList(id,page) {
            //alert(id)
            var page=this.current_page;
            var cid=this.cid;
            this.cid = this.$refs.cid.innerHTML;
            if (this.$refs.cid.innerHTML == '') {
            this.$http.get('http://thy.588net.com/index.php/article/video/get_video_list?company_id=' + this.com_id + '&page=' + page +'&is_web=' + 1+'&cid='+id).then(function(res) {
                this.page = res.body.data.total;
                this.sum_=res.data.data;
                this.video = res.body.data.data;
                if(this.page-8<=0){
                    this.videoData=false;
                }else{
                    this.videoData=true;
                }
                this.isOpen = false;
                //alert('无cidd')
                //console.log(this.video.data)
            })
            }else{
                //alert('有又有有有cidi')
                this.$http.get('http://thy.588net.com/index.php/article/video/get_video_list?company_id=' + this.com_id + '&page=' + page +'&is_web=' + 1+'&cid='+this.cid).then(function(res) {
                this.page = res.body.data.total;
                this.sum_=res.data.data;
                this.video = res.body.data.data;
                if(this.page-8<=0){
                    this.videoData=false;
                }
                this.isOpen = false;
                //console.log(this.video)
            })
            }
        },
        pageIndexChange: function (val) {
            window.scrollTo(0, 0);
            this.current_page = val;
            //console.log(this.id)
            this.loadvideoList(this.id);
        },
        active(event,val,id) {
            page=1;
            this.current_page = 1;
            this.cid_focus = id;//当前高亮
            this.id=id;
            //console.log(this.id)
           // this.loadvideoList(this.id,this.current_page);//注入更新值
           this.$http.get('http://thy.588net.com/index.php/article/video/get_video_list?company_id=' + this.com_id + '&page=' + page +'&is_web=' + 1+'&cid='+this.id).then(function(res) {
                this.page = res.body.data.total;
                this.sum_=res.data.data;
                this.video = res.body.data.data;
                //alert(this.page)
                //console.log(this.page.data)
                if(this.page-8<=0){
                    this.videoData=false;
                }else{
                    this.videoData=true;
                }
            })
            this.$route.params.cid = id;
        }
    },
    activated:function(){
        var self=this;
        $(".is-active").removeClass("is-active");
        setTimeout(function() {
            self.loadLeftside();
            self.loadBanner();
            //this.loadvideoList();
        },500);
    }
}

</script>




<style scoped>
.left_active2 {
    background: #2277ff;
    color: #fff!important;
}
#page {
    text-align: center;
    padding-bottom: 20px
}
.noData{
    font-size: 20px;
    color:#5a5a5a;
    padding: 20px;
}
.video_bd {
    margin-top: 24px
}

#video {
    margin: 0 auto;
    max-width: 1200px
}

#video_box {
    padding: 20px;
    background: #fff;
    box-shadow: 0px 0px 6px 0px #d8d8d8;
    padding-bottom: 0
}


.video_box {
    /* padding: 0 20px!important */
    margin-bottom: 20px
}



/* .video_box:nth-last-of-type(2){
    margin-bottom: 0px;
}
.video_box:nth-last-of-type(1){
    margin-bottom: 0px;
    float:left
} */

.list_cont {
    /* border: 1px solid #d8d8d8;
    border-radius: 8px; */
    overflow: hidden;
}

.desc_summary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    padding-bottom: 14px;
    line-height: 40px;
    height: 40px;
    width: 100%;
    color: #7d7c7c;
    -webkit-line-clamp: 3;
}

.icon_video {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    color: rgba(255, 255, 255, .5);
    -webkit-animation: play 2s linear 0s infinite alternate;
    animation: play 2s linear 0s infinite alternate;
}

.el-icon-d-arrow-right {
    margin-left: 5px
}

@-webkit-keyframes play {
    0% {
        -webkit-transform: scale(1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes play {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.video_cover>a>img {
    display: block;
    width: 100%;
    height: 250px;
}

.covers {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 250px;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
}

.desc_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #5a5a5a;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.video_cover {
    width: 100%;
    position: relative;
}

.video {
    clear: both;
    overflow: hidden;
    background: #fff;
    padding: 0 20px;
    margin-top: 20px;
    border-bottom: 2px solid #d8d8d8
}




.bd {
    background: #f5f5f5
}

.right {
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px 0px #d8d8d8;
}




.video_banner {
    max-width: 1200px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
}

.video_banner img {
    width: 100%;
    height: 200px
}



.left ul {
    box-shadow:0px 0px 6px 0px #d8d8d8;
    background: #fff;
}

.left ul li {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #5a5a5a;
    cursor: pointer;
    list-style: none;
}

.left_active {
    background: #2277ff;
    color: #fff!important;
}
</style>
